<div class="modal-dialog modal-lg" role="document" id="compactionModal">
    <div class="modal-content" tabindex="-1">
        <div class="modal-header">
            <div class="flex-horizontal">
                <div class="flex-grow">
                    <h3 class="modal-title" id="myModalLabel" data-bind="text: op.title, attr:{ class: 'modal-title ' + op.headerClass() }"></h3>
                </div>
                <div class="flex-grow text-right margin-right margin-right-sm">
                    <span class="text-muted">Time elapsed:</span> <span data-bind="text: op.duration"></span>
                </div>
                <div>
                    <button type="button" class="close" data-bind="click: close" aria-hidden="true">
                        <i class="icon-cancel"></i>
                    </button>
                </div>
            </div>
            <div class="notification-time" data-bind="text: op.displayDate().format('LLL')"></div>
        </div>
        <div class="modal-body">
            <h3 class="text-danger" data-bind="visible: operationFailed">Operation failed!</h3>
            <div class="items-list" data-bind="visible: items().length">
                <div class="export-legend">
                    <div class="name">
                    </div>
                    <div class="status status-processed">
                        status
                    </div>
                    <div class="read">
                        processed
                    </div>
                    <div class="skipped">
                        total
                    </div>
                    <div class="entries">
                    </div>
                </div>
                <div data-bind="foreach: items">
                    <div class="export-item">
                        <div class="name">
                            <h3 data-bind="text: name, attr: {title: name}"></h3>
                        </div>
                        <div class="status status-processed" data-bind="visible: stage === 'processed'">
                            <i class="icon-check"></i> <span>Processed</span>
                        </div>
                        <div class="status status-skipped" data-bind="visible: stage === 'skipped'">
                            <i class="icon-skip"></i> <span>Skipped</span>
                        </div>
                        <div class="status status-processing" data-bind="visible: stage === 'processing'">
                            <span class="global-spinner spinner-sm"></span> <span>Processing</span>
                        </div>
                        <div class="status status-waiting" data-bind="visible: stage === 'pending'">
                            <i class="icon-waiting"></i> <span>Pending</span>
                        </div>
                        <div class="read" data-bind="text: processed.toLocaleString()"> <!-- TODO css: { 'text-muted': !hasReadCount } -->
                        </div>
                        <div class="skipped" data-bind="text: total.toLocaleString()"> <!--  TODO css: { 'text-muted': !hasSkippedCount }-->
                        </div>
                        <div class="entries">trees</div>
                    </div>
                    <div class="attachments export-item" data-bind="with: detailedProgress, visible: detailedProgress">
                        <div class="name">
                            <h4 data-bind="text: 'Current tree: ' + treeName"></h4>
                        </div>
                        <div class="status">
                        </div>
                        <div class="read" data-bind="text: processed.toLocaleString()">
                        </div>
                        <div class="skipped" data-bind="text: total.toLocaleString()">
                        </div>
                        <div class="entries">entries</div>
                    </div>
                </div>
            </div>
            <div class="clearfix" data-bind="visible: !operationFailed()">
                <div class="pull-right margin-top">
                    <button class="btn btn-default btn-sm" data-bind="click: toggleDetails, text: detailsVisible() ? 'Hide details':'Show details', clickBubble: false">
                    </button>
                </div>
            </div>
            <pre class="margin-top compact-messages" data-bind="visible: detailsVisible"><code data-bind="foreach: messages"><span data-bind="text: '\n' + $data"></span></code></pre>
            <div class="toggle margin-top margin-top-sm" data-bind="visible: detailsVisible() && !operationFailed()">
                <input id="smuggler-monitoring" type="checkbox" data-bind="checked: tail, disable: op.isCompleted">
                <label for="smuggler-monitoring">
                    Monitoring (tail -f)
                </label>
            </div>
        </div>
        <div class="modal-footer" data-bind="compose: $root.footerPartialView">
        </div>
    </div>
</div>
